<template>
	<div id="app">
    <div style="height: 300px;width: 100%;padding: 20px;">
      <sl-grid ref="grid"
        :key-name="'id'"
        :height="'100%'"
        :table-data="'http://weifashi.320.io/Itbiji/index.php/Slui/getDate'"
        :title="'列表标题'"
        :params="{'id':'grid','filter':[]}"
        :parse-data="{'code':'code','msg':'message','total':'data.total','data':'data.data'}"
        :show-index="true"
        :show-checkbox="true"
        :show-title-row="true"
        :show-refresh-btn="true"
        :show-page="true"
        :fixed-index-column="true"
        :page-size="50"
        :page-list="[50, 100, 300, 500, 1300]"
        :enable-all-rort="'all'"
        :remote-sort="false"
        :auto-load="true"
        :mergeCheck="false"
        :mergeIndex="false"
        :cell-class-name="rowClassName"
        :nowrap="false"
        :refreshResetPage="false"
        @loadSuccess="loadSuccessFn"
        @row-click="rowclick"
        @row-dblclick="rowDblClick"
        @row-select="rowDblClick"
        @input="input"
      >
        <template slot="headHtml">
          自定义组件或html的放置区
        </template>
        <template slot="button">
          <!-- 按钮区 -->
          <sl-button type="primary" text="获取数据" @click="getData" class=""/>
          <sl-button type="primary" text="获取选中行" @click="getSelectedRows" class=""/>
          <sl-button type="primary" text="添加" @click="add" />
          <sl-button type="text" text="删除选中行" @click="deleteRow(false)" />
          <sl-button type="warn" text="更多">
            <dd @click="updateRow">更新行数据</dd>
            <dd @click="selectedRows">选中行</dd>
            <dd @click="deselect">取消选中</dd>
          </sl-button>
        </template>
        <template slot="cols">
          <cell type="text" title="二级表头" align="center" >
            <cell type="text" title="文本类型" name="text" align="left" width="100" sort="true"  isEdit="false" vtype="*" merge="false"  ></cell>
            <cell type="number" title="数字类型" name="num" align="right" width="100" sort="true"  isEdit="true" vtype="*" merge="false" min="0" max='1000' acc="2" total="[num]元"></cell>
          </cell>
          <cell type="valid" title="有效类型" name="is_valid" align="center" width="100" sort="true" isEdit="true" vtype="*" merge="false" data="[{text:'男',value:'男'},{text:'女',value:'女'}]"></cell>
          <cell type="status" title="状态类型" name="is_valid" align="center" width="100" sort="true" isEdit="true" vtype="*" merge="false" data="[{text:'男',value:'男'},{text:'女',value:'女'}]"></cell>
          <cell type="select" title="下拉类型" name="selects" align="center" width="80" sort="true" isEdit="true" vtype="*" merge="false" data="[{text:'男',value:'男'},{text:'女',value:'女'}]"></cell>
          <cell type="testFnType" title="自定义单元格" name="" align="left" width='' minWidth="" sort="false" total="false" merge="false"></cell>
          <cell type="datetime" title="时间类型" name="time" align="center" width="150" format="YYYY-MM-DD" isEdit="true" fixed="right"></cell>
          <cell type="button" title="操作" name="" align="center" width="100" minWidth='100' fixed="right" click="deleteRow(rowIndex,row)[删除];enabledEdit(rowIndex,row)[编辑]" sort="false" ></cell>
        </template>
      </sl-grid>
    </div>
	</div>
</template>

<script>

export default {
	name: 'app',
	data () {
		return {
			cols: [
				{
					title: "用户",name: "", align: "center", width: "100", sortable: true,
					cols:[
						{title: "用户编码",  name: "user_code", align: "left", width: "100", total: true},
						{title: "用户名称",  name: "user_name", align: "left", width: "140", total: false},
					]
				},
				{title: "主键",  name: "log_id", align: "right", width: "100", total: false},
				{title: "主键2",  name: "log_id2", align: "right", width: "100", total: false},
				{title: "请求",  name: "", align: "center", width: "", total: false,
					cols:[
						{title: "状态",  name: "state", align: "right", width: "120", total: false},
						{title: "参数",  name: "param", align: "left", width: "120", total: false}
					]
				},
				{title: "时间", name: "create_time", align: "right", minWidth:"150",sortable:false,fixed:"right"},
				{title: "路由", name: "url", align: "left", width:"150",sortable:true,fixed:"right"}
			],
			tableData:[]
		}
	},
	mounted() {
		let data=[];
		data.push({log_id:"2122",log_id2:3,sex:"女",state:"adsdadsdadsdadsd",name2:"bazxsw",url:"s23"})
		data.push({log_id:"212",log_id2:2,sex:"女",state:"adsd",name2:"bazxsw",url:"s3"})
		data.push({log_id:"212",log_id2:2,sex:"女",state:"adsd",name2:"bazxsw",url:"s3",_isEdit:true})
		this.tableData = data;
	},
	methods: {
    //获取随机中文
    randomText(){
      var _len = 2,i=0,_str="",_base=20000,_range=1000;
      while(i < _len){
          i++;
          var _lower = parseInt(Math.random() * _range);
          _str += String.fromCharCode(_base + _lower);
      }
      return _str;
    },
    // 自定义类型
    testFnType(row,rowKey,col,colKey){
      return `<a @click='testFnTypeEvent(2)'>自定义: ${row['id']} </a>`;
    },
    // 自定义类型的事件使用
    testFnTypeEvent(mode){
      console.log(this.slApp);
      console.log(mode);
    },
    //按钮类型方法
    btnFn(url){
      console.log(this.tableData);
    },
    //加载成功
		loadSuccessFn(data,summary){
			this.$refs["grid"].disabledEdit();
		},
    //启用编辑
		enabledEdit(rowindex,row){
			this.$refs["grid"].enabledEdit(rowindex);
		},
    // 禁用编辑
    disabledEdit(rowindex,row){
      this.$refs["grid"].disabledEdit(rowindex);
    },
    //获取表格数据
		getData(){
			let grid = this.$refs["grid"];
			grid.enabledEdit();
			let data = this.$refs["grid"].getData();
			console.log( data )
		},
    //获取选中行
    getSelectedRows(){
      let data = this.$refs["grid"].getSelectedRows();
      console.log( JSON.stringify(data) )
    },
    // 选中指定行
    selectedRows(){
      let grid = this.$refs["grid"];
      grid.select(3,true);
    },
    // 取消选中行
    deselect(){
      let grid = this.$refs["grid"];
      grid.deselect(3)
    },
    //删除行
    deleteRow(rowindexs){
      let index = rowindexs || this.$refs["grid"].getSelectedIndexs();
      this.$refs["grid"].deleteRow( index );
    },
    //更新行
    updateRow(){
      let grid = this.$refs["grid"];
      grid.select([{name:"id",value:"1"}]);
      grid.updateRow("id", "1",{
          text:"我已被更新",
          num: 1002,
          selects: ["男","女"][ Math.floor((Math.random()*2)) ],
          time: "2018-09-19 12:33",
      });
    },
    // 添加行
		add(){
      let grid = this.$refs["grid"];
      var day = new Date();
      var rows= [{
          id: 10001 ,
          text:this.randomText(),
          num: 100,
          selects: ["男","女"][ Math.floor((Math.random()*2)) ],
          time: day.getFullYear()+"-" + (day.getMonth()+1) + "-" + day.getDate(),
          _isChecked:true
      }];
      grid.addRow(rows,1);
		},
    // 行单击
    rowclick(row,rowIndex,el){
      console.log("行单击")
      let grid = this.$refs["grid"];
      console.log(grid.getLoadParams())
    },
    // 行双击事件
    rowDblClick(row,rowIndex,el){
      console.log("行双击")
    },
    // 监听输入事件
    input(field , value , row, rowIndex){
      console.log(field)
      console.log(value)
      console.log(row)
      console.log(rowIndex)
    },
    // 获取自定行的classname
		rowClassName(row,rowIndex){
			if(rowIndex == 3){
				return "sssdsd";
			}else{
				return "";
			}
		}
	},
	watch: {

	}
}
</script>

<style lang="scss">

</style>
